<template>
  <h1>客户管理</h1>
  <el-table :data="clientList" stripe>
    <el-table-column prop="clientName" label="客户名称"></el-table-column>
    <el-table-column prop="clientLeader" label="负责人"></el-table-column>
    <el-table-column prop="clientScope" label="经营范围"></el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button type="primary" @click="findClient(scope.row.clientId)">查看</el-button>
        <el-button type="primary" @click="updateClient(scope.row.clientId)">修改信息</el-button>
      </template>
    </el-table-column>
  </el-table>

  <el-pagination v-model:current-page="curPage" v-model:page-size="pageSize" background
                 :total="total" @current-change="reload"></el-pagination>

  <div style="margin-top: 20px">
    <el-button type="primary" @click="addDialog">添加客户</el-button>
  </div>

  <el-dialog v-model="dialogVisible" title="添加客户信息" width="30%">
    <el-form :model="clientForm" ref="clientForm" :rules="rules">
      <el-form-item label="客户名称" prop="clientName">
        <el-input v-model="clientForm.clientName"></el-input>
      </el-form-item>
      <el-form-item label="负责人" prop="clientLeader">
        <el-input v-model="clientForm.clientLeader"></el-input>
      </el-form-item>
      <el-form-item label="负责人电话" prop="phoneNumber">
        <el-input v-model="clientForm.phoneNumber"></el-input>
      </el-form-item>
      <el-form-item label="办公地址" prop="clientAddress">
        <el-input v-model="clientForm.clientAddress"></el-input>
      </el-form-item>
      <el-form-item label="邮箱" prop="clientEmail">
        <el-input v-model="clientForm.clientEmail"></el-input>
      </el-form-item>
      <el-form-item label="经营范围" prop="clientScope">
        <el-input v-model="clientForm.clientScope"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
       <el-button type="primary" @click="addClient">添加</el-button>
      </span>
    </template>
  </el-dialog>

  <el-dialog v-model="lookVisible" title="客户信息详情" width="30%">
    <el-form :model="clientForm">
      <el-form-item label="客户名称" prop="clientName">
        <span>{{clientForm.clientName}}</span>
      </el-form-item>
      <el-form-item label="负责人" prop="clientLeader">
        <span>{{clientForm.clientLeader}}</span>
      </el-form-item>
      <el-form-item label="负责人电话" prop="phoneNumber">
        <span>{{clientForm.phoneNumber}}</span>
      </el-form-item>
      <el-form-item label="办公地址" prop="clientAddress">
        <span>{{clientForm.clientAddress}}</span>
      </el-form-item>
      <el-form-item label="经营范围" prop="clientEmail">
        <span>{{clientForm.clientEmail}}</span>
      </el-form-item>
      <el-form-item label="经营范围" prop="clientScope">
        <span>{{clientForm.clientScope}}</span>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
       <el-button type="primary" @click="lookVisible=false">确定</el-button>
      </span>
    </template>
  </el-dialog>

  <el-dialog v-model="updateVisible" title="修改供应商信息" width="30%">
    <el-form :model="clientForm" ref="clientForm" :rules="rules">
      <el-form-item prop="clientId" hidden></el-form-item>
      <el-form-item label="客户名称" prop="clientName">
        <span>{{clientForm.clientName}}</span>
      </el-form-item>
      <el-form-item label="负责人" prop="clientLeader">
        <el-input v-model="clientForm.clientLeader"></el-input>
      </el-form-item>
      <el-form-item label="负责人电话" prop="phoneNumber">
        <el-input v-model="clientForm.phoneNumber"></el-input>
      </el-form-item>
      <el-form-item label="办公地址" prop="clientAddress">
        <span>{{clientForm.clientAddress}}</span>
      </el-form-item>
      <el-form-item label="邮箱" prop="clientEmail">
        <span>{{clientForm.clientEmail}}</span>
      </el-form-item>
      <el-form-item label="经营范围" prop="clientScope">
        <el-input v-model="clientForm.clientScope"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
       <el-button type="primary" @click="xiugai">修改</el-button>
      </span>
    </template>
  </el-dialog>

  <div style="width: 150px;margin-left: 900px">
    <span>客户名称</span> <el-input v-model="findName"></el-input>
    <span>经营范围</span> <el-input v-model="findScope"></el-input>
    <el-button type="primary" @click="reload">查询</el-button>
  </div>
</template>

<script>
import axios from "axios"
import {ElMessage} from "element-plus";
export default {
  created() {
    this.reload();
  },
  name: "Client",
  data(){
    return{
      clientList:[],
      curPage:1,
      pageSize:5,
      total:0,
      clientForm:{},
      dialogVisible:false,
      lookVisible:false,
      updateVisible:false,
      findName:'',
      findScope:'',
      rules:{
           clientName: [{required:true,message:'请输入客户名称',trigger:'blur'}],
           clientLeader:[{required:true,message:'请输入负责人姓名',trigger:'blur'}],
        phoneNumber:[{required:true,message:'请输入电话号码',trigger:'blur'},
          {pattern:/^[1]([3-9])[0-9]{9}$/, message:
                '请输入正确的电话号码', trigger: 'blur'}],
        clientAddress:[{required:true,message:'请输入办公地址',trigger:'blur'}],
        clientEmail:[{required:true,message:'请输入邮箱',trigger:'blur'},
          {pattern:/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/, message:
                '请输入正确的邮箱', trigger: 'blur'}],
        clientScope: [{required:true,message:'请输入客户经营范围',trigger:'blur'}]
      }
    }
  },
  methods:{
    addDialog(){
      this.clientForm = {};
      this.dialogVisible = true;
    },
    addClient(){
      this.$refs.clientForm.validate((valid) => {
        if (valid) {
          axios.post("/api/client/addClient",this.clientForm).then(response=>{
            if (response.data=='success'){
              this.reload();
              this.dialogVisible=false;
              ElMessage({
                message:'添加成功',
                type:'success'
              })
            }else {
              ElMessage({
                message:'添加失败，请联系管理员',
                type:'error'
              })
            }
          })
        }else {
          ElMessage.error("请输入正确的数据")
        }
      });

    },
    findClient(clientId){
      let param = new URLSearchParams();
      param.append("clientId",clientId)
       axios.post("/api/client/findClientById",param).then(response=>{
         this.clientForm = response.data;
         this.lookVisible = true;
       })
    },
    updateClient(clientId){
      let param = new URLSearchParams();
      param.append("clientId",clientId)
      axios.post("/api/client/findClientById",param).then(response=>{
        this.clientForm = response.data;
        this.updateVisible = true;
      })
    },
    xiugai(){
      this.$refs.clientForm.validate((valid) => {
        if (valid) {
          axios.post("/api/client/modifyClient",this.clientForm).then(response=>{
            if (response.data=='success'){
              this.reload();
              this.updateVisible=false;
              ElMessage({
                message:'修改成功',
                type:'success'
              })
            }else {
              ElMessage({
                message:'修改失败，请联系管理员',
                type:'error'
              })
            }
          })
        }else {
          ElMessage.error("请输入正确的数据")
        }
      });

    },
    reload(){
      let param = {
        "pageNo" : this.curPage,
        "pageSize":this.pageSize,
        "t":{"clientName":this.findName,
          "clientScope":this.findScope}
      }
      axios.post("/api/client/findClientsByPage",param).then(response=>{
        let data =response.data;
        this.clientList = data.records;
        this.curPage=data.current;
        this.total=data.total;
      })
    }
  }
}
</script>

<style scoped>

</style>